<template>
  <div>
    <div id="main" :style="{ width: width, height: height }" ref="main"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";

import { reactive, onMounted, ref } from "vue";

const props = defineProps({
  title: {
    type: String,
    default: "示例图",
  },
  x: {
    type: Array,
    default: [],
  },
  y: {
    type: Array,
    default: [],
  },
  type: {
    type: String,
    default: "bar",
  },
  width: {
    type: String,
    default: "500px",
  },
  height: {
    type: String,
    default: "300px",
  },
  yname: {
    type: String,
    default: "数量",
  },
});

const main = ref(null);

const options = reactive({
  title: {
    text: "示例图",
  },
  tooltip: {},
  xAxis: {
    data: [],
  },
  yAxis: {},
  series: [
    {
      name: "数量",
      type: "bar",
      data: [],
    },
  ],
});

// 更新视图
options.title.text = props.title;
options.xAxis.data = props.x;
options.series[0].data = props.y;
options.series[0].type = props.type;
options.series[0].name = props.yname;

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  const Chart = echarts.init(main.value);
  // 绘制图表
  Chart.setOption(options);
});
</script>

<style lang="scss" scoped>
</style>